<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俊哥·鉴 - 访客阁</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/guestbook.css">
</head>
<body>
    <nav class="main-nav">
        <a href="index.html">首页</a>
        <a href="about.html">人物志</a>
        <a href="portfolio.html">学业坊</a>
        <a href="timeline.html">千秋纪</a>
        <a href="guestbook.html" class="active">访客阁</a>
    </nav>

    <main class="content-wrapper guestbook-page">
        <canvas id="lantern-bg-canvas" style="position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;"></canvas>
        <header class="page-header">
            <h1 class="section-title">雅集轩</h1>
            <p class="section-subtitle">有朋自远方来，不亦说乎？请在此留下您的墨宝。</p>
        </header>

        <section class="guestbook-form-section">
            <form id="guestbook-form" class="guestbook-form">
                <div class="form-group">
                    <label for="nickname">昵称</label>
                    <input type="text" id="nickname" name="nickname" required>
                </div>
                <div class="form-group">
                    <label for="message">留言</label>
                    <textarea id="message" name="message" rows="4" required></textarea>
                </div>
                <button type="submit" class="submit-button">题字留念</button>
            </form>
            <button class="send-pigeon" id="sendPigeonBtn">
                <img src="assets/icons/con-carrier-pigeon.svg" class="pigeon-icon" alt="飞鸽传书">
                飞鸽传书
                <span id="envelopeAnim"></span>
            </button>
        </section>

        <section id="lantern-wall" class="lantern-wall-section">
            <h2 class="section-title">留言灯廊</h2>
            <div class="lantern-container">
                <!-- Lantern messages will be dynamically added here -->
                <div class="lantern">
                    <div class="lantern-content">
                        <p class="message-text">网站做得真不错！</p>
                        <p class="nickname-text">- 访客甲</p>
                    </div>
                </div>
                <!-- More lanterns... -->
            </div>
        </section>

    </main>

    <footer class="site-footer">
        <p>
            &copy; 2025 俊哥·鉴
        </p>
    </footer>

    <script src="js/data.js"></script>
    <script src="js/guestbook.js"></script>
</body>
</html> 